<template>
	<view>
		<!-- 1，标题 -->
		<view class="title">
			<text>请告诉我你想举报该用户的理由</text>
		</view>
		<!-- 2，需要选择的问题 -->
		<view class="list" v-for="(item,index) in showList" :key="index">
			<view class="box">
				<view class="left-name">
					<text>{{item.name}}</text>
				</view>
				<view class="right-rideo">
					<radio style="transform: scale(0.9)" class="redio-item" @click="redioClickHandler($event,item)">
					</radio>
				</view>
			</view>
		</view>
		<!-- 3，图片提示 -->
		<view class="img-tips">
			<text style="color: rgba(56, 56, 56, 1);">涉及微信、QQ等平台取证请上传图片（最多4张）</text>
			<text style="color: rgba(166, 166, 166, 1);">0/4</text>
		</view>
		<!-- 4，上传的图片 -->
		<view class="img-submit">
			<view class="img-null">
				<image :src="addImg"></image>
			</view>
		</view>
		<!-- 5，拉黑 -->
		<view class="box">
			<view class="left-name">
				<text>同时拉黑TA</text>
			</view>
			<view class="right-rideo">
				<radio style="transform: scale(0.9)" class="redio-item" @click="redioClickHandler($event,item)">
				</radio>
			</view>
		</view>
		<!-- 6，提交按钮 -->
		<view class="btn-bottom">
			<view class="btn">
				<text @click="createGroupFun">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showList: [{
					id: 1,
					name: '色情暴力/违法消息'
				}, {
					id: 2,
					name: '人生攻击/诈骗信息'
				}, {
					id: 3,
					name: '政治敏感度/有害信息'
				}, {
					id: 4,
					name: '广告骚扰/不实信息'
				}],
				addImg: require('@/static/img/msg/set/01.svg'),
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;

		font-size: 26rpx;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);

		background-color: rgba(247, 247, 247, 1);

		text {
			margin-left: 20rpx;
		}
	}

	.list {
		width: 100%;
	}

	.box {
		width: 94%;
		margin-left: 3%;
		height: 120rpx;
		line-height: 120rpx;
		display: flex;
		justify-content: space-between;

		.left-name {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(56, 56, 56, 1);
		}
	}

	.img-tips {
		height: 60rpx;
		line-height: 60rpx;

		text {
			font-size: 26rpx;
			margin-left: 20rpx;
		}
	}

	.img-submit {
		width: 100%;
		margin: 20rpx 40rpx;

		.img-null {
			width: 94%;
			margin-left: 3%;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}

	.btn-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		height: 120rpx;
		width: 100%;

		.btn {
			width: 80%;
			height: 80rpx;
			margin-left: 10%;
			border-radius: 60rpx;
			line-height: 80rpx;
			background-color: rgba(247, 74, 115, 1);
			text-align: center;

			text {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>
